<template>
  <div ref="lineChartRef" class="common-frame border">
    <!-- 在这里放置 ECharts 图表 -->
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from 'echarts';

const lineChartRef = ref(null);

onMounted(() => {
  const chartDom = lineChartRef.value;
  const myChart = echarts.init(chartDom);
  const option = {
    xAxis: {
      type: 'category',
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [80, 120, 100, 90, 160],
        type: "line"
      }
    ]
  };

  if (option && typeof option === 'object') {
    myChart.setOption(option);
  }
});
</script>

<style scoped>
.common-frame {
  width: 600px;
  height: 400px;
  position: relative;
  border: 2px solid #add8e6; /* 淡蓝色边框 */
  border-radius: 8px;
  background: rgba(0, 72, 115, 0.28);
}
</style>
